/**
 * 库设置的侧导
 */

import React from 'react';
import { navigate } from 'utils/router';
import { Nav, Balloon, Button } from '@teamix/ui';
import TagForFeature from 'components/tagForFeature';
import ExtraBtn from './extraBtn';
import intl from '../../../../../../../../locale';

const { pathResource } = window.FORCE;

export default class projectSecurityNav extends React.Component {
  constructor(props) {
    super(props);
    const { resourceSubject } = window.FORCE;
    this.state = {
      selectKey: `security.${resourceSubject.path || 'sensitive_info'}`,
    };
  }

  render() {
    const defaultBranch = pathResource.defaultBranch || 'master';
    const { plugins, serviceData, pinelineInfo } = this.props;

    return (
      <Nav
        type="normal"
        direction="ver"
        triggerType="click"
        selectedKeys={this.state.selectKey}
        // onSelect={this.onSelect}
        {...this.props}
      >
        <Nav.Item
          key="security.sensitive_info"
          onClick={() => {
            navigate(`/${pathResource.fullPath}/project_security/sensitive_info/${defaultBranch}`);
            this.setState({
              selectKey: 'security.sensitive_info',
            });
          }}
        >
          <div className="nav-item">
            {intl.get({
              id: 'code-assets.containers.projectSecurityTab.SensitiveInformationDetection',
              defaultMessage: '敏感信息检测',
            })}
            <ExtraBtn
              key={'sensitive_info_detection'}
              plugin={plugins.find((item) => {
                return item.key === 'sensitive_info_detection';
              })}
              serviceData={serviceData}
            />
          </div>
        </Nav.Item>
        <Nav.Item
          key="security.dependency_analysis"
          onClick={() => {
            navigate(
              `/${pathResource.fullPath}/project_security/dependency_analysis/${defaultBranch}`,
            );
            this.setState({
              selectKey: 'security.dependency_analysis',
            });
          }}
        >
          <div className="nav-item">
            {intl.get({
              id: 'code-assets.containers.projectSecurityTab.DependencyPackageVulnerabilityDetection',
              defaultMessage: '依赖包漏洞检测',
            })}
            <ExtraBtn
              key={'dependency_analysis'}
              plugin={plugins.find((item) => {
                return item.key === 'dependency_analysis';
              })}
              serviceData={serviceData}
            />
          </div>
        </Nav.Item>
        <Nav.Item
          key="security.pinpoint"
          onClick={() => {
            navigate(`/${pathResource.fullPath}/project_security/pinpoint/${defaultBranch}`);
            this.setState({
              selectKey: 'security.pinpoint',
            });
          }}
        >
          <div className="nav-item">
            <span>
              {intl.get({
                id: 'code-assets.containers.projectSecurityTab.SourceCodeVulnerabilityDetection',
                defaultMessage: '源码漏洞检测',
              })}
              <TagForFeature
                type="primary"
                style={{ margin: '0 0 2px 4px' }}
                tagText="BETA"
              />
            </span>

            <Balloon.Tooltip
              align="t"
              closable={false}
              trigger={
                <img
                  className="tab-flow-img"
                  style={{ width: 20, height: 20 }}
                  src="https://tcs-devops.aliyun.com/thumbnail/111r5654e7a3c12aa319236976eb9530c2cf/w/88/h/88"
                />
              }
            >
              {pinelineInfo ? (
                <div>
                  {intl.get({
                    id: 'code-assets.containers.projectSecurityTab.LatestReportSourcePipeline',
                    defaultMessage: '最新报告来源流水线：',
                  })}

                  <Button
                    type="primary"
                    text
                    component="a"
                    href={pinelineInfo.url}
                    target="_blank"
                    style={{ marginBottom: '2px' }}
                  >
                    {pinelineInfo.name}
                  </Button>
                </div>
              ) : (
                intl.get({
                  id: 'code-assets.containers.projectSecurityTab.CloudEffectPipelineFlowSupport',
                  defaultMessage: '云效流水线 Flow 支持',
                })
              )}
            </Balloon.Tooltip>
          </div>
        </Nav.Item>
      </Nav>
    );
  }
}
